<template>
  <wd-tabbar
    fixed
    :model-value="current"
    bordered
    safe-area-inset-bottom
    placeholder
    active-color="#fa6400"
    inactive-color="#333333"
    custom-style="background-color:#e5cea2"
    @change="handleTabChange"
  >
    <wd-tabbar-item
      v-for="(item, index) in list"
      :key="index"
      :title="item.title"
      :name="item.path"
    >
      <template #icon>
        <wd-img height="44rpx" mode="heightFix" :src="item.icon"></wd-img>
      </template>
    </wd-tabbar-item>
  </wd-tabbar>
</template>

<script setup lang="ts">
import { currRoute } from '@/utils'
import { to } from '@/utils/navigation'
const list = ref([
  {
    title: '首页',
    icon: '/static/tabbar/tab_1.jpg',
    path: '/pages/index/index',
  },
  {
    title: '排行',
    icon: '/static/tabbar/tab_2.jpg',
    path: '/pages/rank/rank',
  },
  {
    title: '奖品',
    icon: '/static/tabbar/tab_3.jpg',
    path: '/pages/prize/prize',
  },
  {
    title: '关于我们',
    icon: '/static/tabbar/tab_4.jpg',
    path: '/pages/about/about',
  },
  {
    title: '夏令营报名',
    icon: '/static/tabbar/tab_5.jpg',
    path: '/pages/apply/apply',
    // path: 'https://lixingjingbing.com/#/',
  },
])
const current = computed(() => {
  return currRoute().path
})

function handleTabChange({ value }: { value: string }) {
  if (value.startsWith('/pages')) {
    to(value)
  } else {
    location.href = value
  }
}
</script>
<script lang="ts">
export default {
  options: {
    virtualHost: true,
  },
}
</script>
<style lang="scss" scoped></style>
